﻿@{
    var sanpham = (Model.Object.SanPham)ViewBag.sanpham;
    var hinhanh = (List<Model.Object.HinhAnh>)ViewBag.hinhanh;
    ViewBag.Title = "XemNhanhChiTietSanPham";
    Layout = "~/Views/Shared/blank.cshtml"; 
}
<div class="product-view">

    <div class="product-essential">
        <form action="#" method="post" id="product_addtocart_form">
            <div class="no-display">
                <input type="hidden" name="product" value="@sanpham.ID" />
                <input type="hidden" name="related_product" id="related-products-field" value="" />
            </div>

            <div class="product-img-box" style="width: 318px">

                <p class="product-image">
                    <a href="@hinhanh[0].ImagePath" class="cloud-zoom" id="cloud_zoom" rel="position:'right',showTitle:false,lensOpacity:0.5,smoothMove:3">
                        <img src="@hinhanh[0].ImagePath" data-srcx2="@hinhanh[0].ImagePath" alt="@sanpham.Ten" title="@sanpham.Ten" width="300" height="300" />
                    </a>
                </p>


                <div class="more-views">
                    <ul id="shopper_gallery_carousel" class="jcarousel-skin-tango clearfix">
                        @foreach (var h in hinhanh)
                        {
                            <li>
                                <a href='@h.ImagePath' class='cloud-zoom-gallery' title=''
                                    rel="useZoom: 'cloud_zoom', smallImage: '@h.ImagePath' ">
                                    <img src="@h.ImagePath" data-srcx2="@h.ImagePath" width="70" height="70" alt="" />
                                </a>
                            </li>
                        }
                    </ul>
                    <div class="jcarousel-controls">
                        <a href="#" class="jcarousel-prev-horizontal" id="shopper_gallery_prev"></a>
                        <a href="#" class="jcarousel-next-horizontal" id="shopper_gallery_next"></a>
                    </div>
                </div>
                <script type="text/javascript">
                    jQuery(document).ready(function ($) {

                        myCarousel = null; // This will be the carousel object

                        function mycarousel_initCallback(carousel, state) {
                            if (state == 'init') {
                                myCarousel = carousel;
                            }
                            $('#shopper_gallery_next').bind('click', function () {
                                carousel.next();
                                return false;
                            });
                            $('#shopper_gallery_prev').bind('click', function () {
                                carousel.prev();
                                return false;
                            });

                            $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-container-horizontal').width(267);
                            $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-clip-horizontal').width(267);
                            $('.product-view .product-img-box .more-views .jcarousel-skin-tango .jcarousel-item').width(81);
                            $('#shopper_gallery_prev, #shopper_gallery_next').css({ marginTop: -57.5 });

                        };

                        $('#shopper_gallery_carousel').jcarousel({
                            scroll: 1,
                            initCallback: mycarousel_initCallback,
                            buttonNextHTML: null,
                            buttonPrevHTML: null
                        });

                        $(window).resize(function () {
                            var n = $('#shopper_gallery_carousel > li').length;
                            var w = $('#shopper_gallery_carousel > li').outerWidth(true);
                            $('#shopper_gallery_carousel').width(n * w);
                            myCarousel.scroll(0);
                        });

                        $('.mousetrap').live('click', function () {
                            var images = [];
                            images.push($('#cloud_zoom').attr('href'));
                            $('a.cloud-zoom-gallery').each(function () {
                                images.push($(this).attr('href'));
                            });

                            $.fancybox(
                                images,
                                {
                                    'padding': 0,
                                    'transitionIn': 'none',
                                    'transitionOut': 'none',
                                    'type': 'image',
                                    'changeFade': 0
                                }
                            );
                            return false;
                        });

                    });
                </script>
            </div>

            <div class="product-shop">

                <div class="product-shop-info">
                    <div class="product-name">
                        <h1>@sanpham.Ten</h1>
                    </div>

                    <div class="price-box">
                        <span class="regular-price" id="product-price-3327">

                            <span class="price">@sanpham.Gia đ</span>
                            <span class="unit-price">/@sanpham.Don_vi_tinh</span>
                        </span>

                    </div>

                    <p class="availability in-stock"><span>Còn hàng</span></p>
                    <p class="sku">SKU: <span>1820081</span></p>

                    <div class="clear"></div>

                    <div class="short-description">
                        <div class="std">
                            @Html.Raw(HttpUtility.HtmlDecode(sanpham.Chi_tiet))

                        </div>
                    </div>


                    <div class="qty-container clearfix">
                        <label for="qty">SL:</label>
                        <input type="text" name="qty" id="qty" maxlength="12" value="1" title="SL" class="input-text qty" />
                    </div>

                    <div class="add-to-box">
                        <div class="add-to-cart">
                            <button type="button" title="Thêm vào giỏ" class="button btn-cart" onclick="javascript: getsp(@sanpham.ID);"><span><span>Thêm vào giỏ</span></span></button>
                        </div>
                    </div>

                    <div class="clear"></div>
                </div>
            </div>
            <div class="clearer"></div>
        </form>
        <script type="text/javascript">
            //<![CDATA[


            function setAjaxData(data, iframe) {
                //showMessage(data.message);
                if (data.status != 'ERROR' && jQuery('.cart-top-container').length) {
                    jQuery('.cart-top-container').replaceWith(data.cart_top);
                }
            }

            function showMessage(message) {
                jQuery('body').append('<div class="alert"></div>');
                var $alert = jQuery('.alert');
                $alert.slideDown(400);
                $alert.html(message).append('<button></button>');
                jQuery('button').click(function () {
                    $alert.slideUp(400);
                });
                $alert.slideDown('400', function () {
                    setTimeout(function () {
                        $alert.slideUp('400', function () {
                            jQuery(this).slideUp(400, function () { jQuery(this).detach(); })
                        });
                    }, 7000)
                });
            }

            var productAddToCartForm = new VarienForm('product_addtocart_form');
            productAddToCartForm.submit = function (button, url) {
                if (this.validator.validate()) {
                    var form = this.form;
                    var oldUrl = form.action;
                    if (url) {
                        form.action = url;
                    }
                    var e = null;
                    // Start of our new ajax code
                    if (!url) {
                        url = jQuery('#product_addtocart_form').attr('action');
                    }
                    url = url.replace("checkout/cart", "ajax/index"); // New Code
                    var data = jQuery('#product_addtocart_form').serialize();
                    data += '&isAjax=1';
                    jQuery('#ajax_loading' + jQuery('#product_addtocart_form').find("[name='product']").val()).css('display', 'block');
                    try {
                        jQuery.ajax({
                            url: url,
                            dataType: 'jsonp',
                            type: 'post',
                            data: data,
                            success: function (data) {
                                jQuery('#ajax_loading' + jQuery('#product_addtocart_form').find("[name='product']").val()).css('display', 'none');
                                setAjaxData(data, true);
                                showMessage(data.message);
                            }
                        });
                    } catch (e) {
                    }
                    // End of our new ajax code
                    this.form.action = oldUrl;

                    if (e) {
                        throw e;
                    }
                }
            }.bind(productAddToCartForm);


            productAddToCartForm.submitLight = function (button, url) {
                if (this.validator) {
                    var nv = Validation.methods;
                    delete Validation.methods['required-entry'];
                    delete Validation.methods['validate-one-required'];
                    delete Validation.methods['validate-one-required-by-name'];
                    if (this.validator.validate()) {
                        if (url) {
                            this.form.action = url;
                        }
                        this.form.submit();
                    }
                    Object.extend(Validation.methods, nv);
                }
            }.bind(productAddToCartForm);
            //]]>
        </script>
    </div>
</div>
